<template>
	<view class="goods_comment">
		<mescroll-body ref="mescrollRef" @up="upCallback" @down="downCallback">
			<!-- 评价 -->
			<view class="comment">
				<view class="comment_content" v-if="comments.length>0" v-for="(v,k) in comments" :key="k">
					<view class="avatar"><image :src="v.user.avatar||'../../static/auth/default_avatars.png'" mode="aspectFit" /></view>
					<view class="comment_info">
						<view class="nickname">{{v.user.nickname}}</view>
						<view class="desc">{{v.content}}</view>
						<view class="img" v-if="v.image.length>0">
							<image v-for="(val,index) in v.image" :key="index" :src="val" mode="aspectFit" />
						</view>
						<view class="other">{{v.created_at||'0000-00-00 00:00'}}</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				params:{
					page:1,
					per_page:10,
				},
				comments:[],
				goods_id:0,
			};
		},
		onLoad(opt) {
			if(this.$isEmpty(opt.id)){
				return this.$toast('商品不存在')
				// return this.$nav('',3);
			}
			this.goods_id = opt.id;
		},
		methods:{
			// 获取评论
			
			upCallback(page){
				this.params.page = page.num; // 页码, 默认从1开始
				this.params.per_page = page.size; // 页长, 默认每页10条
				
				let obj = {...this.$api.goodsComments}
				obj.url += '/'+this.goods_id 
				
				this.$http(obj,this.params).then(res=>{
					if(res.code == 200){
						if(this.params.page == 1){
							this.comments = [];
						}
						this.comments = this.comments.concat(res.data.data||res.data); //追加新数据
						this.mescroll.endBySize(this.params.per_page, res.data.total); 
						if(res.data.total<8){
							this.mescroll.endUpScroll(false)
						}
						if(res.data.total==0){
							this.mescroll.showEmpty();
						}
					}
				})
			},
			downCallback(){
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>

<style lang="scss" scoped>
.goods_comment{
	.comment{
		background: #fff;
		margin-top: 1px;
		.comment_content{
			display: flex;
			padding: 30rpx;
			border-top: 1px solid #efefef;
			.comment_info{
				flex: 1;
				font-size: $uni-font-size-base;
				.nickname{margin-bottom: 10rpx;}
				.desc{margin-bottom: 20rpx;color:#666}
				.img{margin-bottom: 20rpx;image{margin-right: 10rpx;background: #eee;width: 130rpx;height: 130rpx;border-radius: 10rpx;}}
				.other{color:#999;font-size: $uni-font-size-sm;}
			}
			.avatar{width: 90rpx;height:90rpx;background: #eee;border-radius: 50%;flex:0 0 90rpx;margin-right: 20rpx;image{width: 90rpx;height: 90rpx;}}
			&:after{
				content:'';clear: both;display: block;
			}
		}
	}
}
</style>
